<template>
	<view class="container">
		<view class="total_red_box">
			<view>
				共收到红包金额
			</view>
			<view class="total_amount">
				<text class="amount">{{(amount?parseFloat(amount):0).toFixed(2)}}</text>
				<text>元</text>
			</view>
		</view>
		<view class="history_info">
			领取记录
		</view>
		<view class="history_lists_box">
			<view class="list_item" v-for="(item, index) in history">
				<view class="item_content">
					<view class="item_title">
						{{item.deptName}}
					</view>
					<view class="item_msg">
						{{item.opTime}}
					</view>
				</view>
				<view class="item_info">
					<text>{{(item.amount?parseFloat(item.amount):0).toFixed(2)}}元</text>
					<text></text>
				</view>
			</view>
		</view>
		<custom-modal :isShow="showMcModal" :content="content" title="温馨提示" :inp="false" :showCancel="false" @ok="confirm" ></custom-modal>
	</view>
</template>

<script>
	import {
		getRedPacketLog,
		queryStudentCardBalance
	} from '../../../common/api/index.js';
	import {
		_showLoading,
		_showToast
	} from '../../../common/js/util.js'
	import customModal from "../../../components/custom-modal/custom-modal.vue";
	export default {
		components: {
			customModal,
		},
		data() {
			return {
				amount: "0",
				history: [/* {
					sender: "发放红包人员",
					amount: "998",
					time: "23-05-16"
				},{
					sender: "发放红包人员",
					amount: "998",
					time: "23-05-16"
				},{
					sender: "发放红包人员",
					amount: "998",
					time: "23-05-16"
				},{
					sender: "发放红包人员",
					amount: "998",
					time: "23-05-16"
				},{
					sender: "发放红包人员",
					amount: "998",
					time: "23-05-16"
				} */],
				orgId: '',
				empId: '',
				showMcModal: false,
				content: ''
			};
		},
		onLoad() {
			this._getRedPacketLog()
		},
		methods: {
			async _getRedPacketLog(){
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				let s_userId = uni.getStorageSync("s_userId");
				const result = await queryStudentCardBalance({
					userId: s_userId,
					bindType: '0'
				})
				if(result.code != 0){
					_showToast('数据获取失败，请稍后重试')
					return
				}
				const profile = this.profile = result.data.students[0].students[0];
				const res = await getRedPacketLog({
					orgId: profile.orgId,
					empId: profile.empId,
				})
				if(res.code == 0){
					uni.hideLoading()
					this.history = res.data.filter(i => i.state != 1)
					this.amount = this.history[0].amount
				}else{
					uni.hideLoading()
					// _showToast('数据获取失败，'+res.msg)
					this.showMcModal = true
					this.content = res.msg
				}
			},
			confirm(){
				this.showMcModal = false
				this.content = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.border{
		content: "";
		display: flex;
		height: 1rpx;
		transform: scaleY(0.5);
		width: 100%;
		background-color: #ddd;
		position: absolute;
		bottom: 0;
		left: 24rpx;
	}
	.container{
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}
	.total_red_box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 80rpx 0 40rpx;
	}
	.total_amount{
		text-align: center;
		.amount{
			font-size: 90rpx;
			font-weight: 900;
		}
	}
	.history_info{
		padding: 36rpx;
		font-size: 20rpx;
		color: #999;
	}
	.history_lists_box{
		padding-bottom: 60rpx;
		background-color: #FFF;
	}
	.list_item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		position: relative;
		height: 90rpx;
		&::after{
			@extend .border;
		}
	}
	.item_header{
		width: 100rpx;
		height: 100rpx;
		.header_icon{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.item_content, .item_info{
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 12rpx;
	}
	.item_info{
		align-items: flex-end;
	}
	.item_msg,.item_info{
		font-size: 24rpx;
	}
	.item_msg{
		color: #999;
	}
</style>
